<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
      } */
    </style>
  </head>
  <body>
    <!-- 用于收集输入内容 -->
    <input type="text" placeholder="请输入需要发送的内容" />
    <!-- 用于发送websocket请求 -->
    <button>websocket测试</button>
    <!-- 用于显示websock服务器的响应 -->
    <div class="show"></div>
    <script>
      var input = document.querySelector('input')
      var button = document.querySelector('button')
      var div = document.querySelector('div')
      // 1. 创建websocket对象, 这个地址是官方提供的地址
      // var socket = new WebSocket('ws://echo.websocket.org')
      var socket = new WebSocket('ws://localhost:3000')

      // 2. 给websocket注册事件
      socket.addEventListener('open', function() {
        // 与服务端建立连接的时候触发
        div.innerText = '恭喜你，与服务端建立连接了'
      })
      // 如何给服务器发送消息
      button.addEventListener('click', function() {
        socket.send(input.value)
        input.value = ''
      })

      // 如果接收服务器的数据
      socket.addEventListener('message', function(e) {
        var data = JSON.parse(e.data)
        var dv = document.createElement('div')
        dv.innerHTML = data.msg + '----' + data.date
        if (data.type === 0) {
          dv.style.color = 'green'
        }
        if (data.type === 1) {
          dv.style.color = 'red'
        }
        if (data.type === 2) {
          dv.style.color = 'gray'
        }
        div.appendChild(dv)
      })

      socket.addEventListener('close', () => {
        div.innerHTML = '与服务器断开连接'
      })
    </script>
  </body>
</html>
